<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>体验Vue.js 2.x</title>
    </head>
    <body>

        <h3>体验Vue.js 2.x</h3>

        <!-- 根组件挂载点 -->
        <div id="root"></div>

        <!-- 首先导入 Vue 核心库 -->
        <script src="../scripts/vue@2.6.14.js"></script>

        <!-- 在另外一个 script 标签中书写自己的代码 -->
        <script>
            const options = {
                // 挂载点
                el: '#root',
                // 数据域
                data: {
                    counter: 1
                },
                // 方法
                methods: {
                    decrease: function(evt){
                        console.log( evt );
                        // 让 counter 减少
                        this.counter-- ;
                    },
                    increase: function(evt){
                        console.log( evt );
                        // 让 counter 增加
                        this.counter++ ;
                    }
                },
                template: `<div> 
                                <div>
                                    <!-- 使用 v-on 绑定 click 事件处理器 -->
                                    <button v-on:click="decrease">变小</button>
                                    <!-- 使用 v-model 指令为 input 绑定属性 -->
                                    <input type="text" v-model="counter">
                                    <button v-on:click="increase">变大</button>
                                </div>
                                <!-- 使用 '插值表达式' 将数据显示到页面上 -->
                                <div>{{ counter }}</div>
                           </div>`
            }
            const vm = new Vue( options );
            console.log( vm );
        </script>
        
    </body>
</html>